<template>
	<view class="container">
		<view class="uni-list">
			<radio-group @change="radioChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in roleList" :key="index">
					<image mode="widthFix" :src="item.pic" class="pic"></image>
					<view class="uni-list-cell-db">{{item.name}}</view>
					<view>
						<radio :value="item.value" :checked="index === current" color="#06A972" />
					</view>
				</label>
			</radio-group>
		</view>
		<navigator url=""></navigator>
		<view class="footer">
			<u-button type="primary" color="#06A972" text="确认" @click="confirm"></u-button>
			<!-- <button type="primary" class="btn text-white bg-color" @click="userType">确认</button> -->
		</view>
	</view>
</template>


<script>
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapState,
		mapGetters
	} from "vuex";
	import {
		saveType
	} from "@/api/user"

	export default {
		computed: mapGetters(['uid', 'isLogin', 'userType']),

		data() {
			return {
				roleList: [
					// {
					// 	value: 'CAR',
					// 	pic: '../../../static/images/choose_01.png',
					// 	name: '我是车主',
					// 	checked: 'true'
					// },
					{
						value: 'STORE',
						pic: '../../../static/images/choose_02.png',
						name: '我是汽车类门店',
					},
					{
						value: 'SALE',
						pic: '../../../static/images/choose_03.png',
						name: '我是当地批发商'
					},
				],
				current: 0,
				type: 'STORE'
			}

		},

		onLoad() {
			let that = this;
			that.current = that.userType == 'SALE' ? 1 : 0;
		},

		onShow() {

		},

		methods: {
			radioChange: function(evt) {
				this.roleList.forEach((e, i) => {
					if (e.value == evt.detail.value) {
						this.type = evt.detail.value;
						this.current = i;
					}
				})
			},

			/**
			 * 保存用户的角色
			 */
			confirm() {
				let that = this;
				console.log(that.uid);
				saveType({
					userInfoId: that.uid,
					userType: that.type
				}).then(res => {
					console.log(that.type);
					that.$store.commit('USER_TYPE', that.type);
					that.$util.Tips({
						title: '保存成功'
					}, {
						tab: 1,
						url: '/pages/user/index'
					})
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			}
		}
	}
</script>

<style>
	page {
		background: #F8F8F8;
	}

	.container {
		position: relative;
		padding: 30rpx;
		font-size: 34rpx;
		font-weight: 500;
	}

	.uni-list::before,
	.uni-list::after,
	.uni-list-cell::after {
		display: none;
	}

	.uni-list {
		background: none;
	}

	.container image {
		/* width: 50rpx;
		height: 50rpx; */
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
	}

	.uni-list-cell {
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 20rpx;
	}

	.uni-list-cell-pd {
		padding: 40rpx 30rpx;
	}
</style>